<template>
    <div class="gobuy">
        <div class="top">
            <div class="div">
                <div class="big">
                    值得买
                    <div class="small">严选好物 用心生活</div>
                </div>
            </div>
            <div class="card">
                <scroll-view scroll-x enable-flex class="item" scroll-bottom :scroll-with-animation="true">
                    <div class="box" v-for="(item, index) in typeArr" :key="index">
                        <img class="img" :src="item.picUrl" alt="" />
                        <div class="title">{{ item.mainTitle }}</div>
                        <div class="text">{{ item.viceTitle }}</div>
                    </div>
                </scroll-view>
            </div>
        </div>
        <div class="bottom">
            <div class="box" v-for="(item, index) in pubuArr" :key="index">
                <img class="img" :src="item.picUrl" alt="" />
                <div class="text">{{ item.subTitle }}</div>
                <div class="userinfo">
                    <div class="user">
                        <img alt="" :src="item.avatar" class="image1" />
                        {{ item.nickname }}
                    </div>
                    <div class="look">
                        <image
                            src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                            class="image2"
                            mode="scaleToFill" />
                        {{ item.readCount }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app';
import Ajax from '@/api/gobuy';
const typeArr = ref<any>([]);
const page = ref<number>(2);
const size = ref<number>(1);
const pubuArr = ref<any>([]);
const isShow = ref<boolean>(true);

onMounted(() => {
    getTypeList();
    getPubu();
});
onReachBottom(() => {
    if (isShow.value == true) {
        page.value = page.value + 1;
        getPubu();
    }
});
const getTypeList = async () => {
    let result: any = await Ajax.reqGobuyType();
    // console.log(result);
    typeArr.value = result.data.navList;
};
const getPubu = async () => {
    let result: any = await Ajax.reqPubu(page.value, size.value);
    if (result.code == 200) {
        // console.log(result);
        pubuArr.value.push(...result.data.result[0].topics);
        isShow.value = result.data.hasMore;
    }
};
</script>

<style scoped lang="less">
.gobuy {
    width: 100%;
    background-color: #eee;
    .top {
        width: 100%;
        background-color: rgb(42, 15, 217);
        // margin: 0 auto;
        // padding: 20rpx;
        .big {
            // align-self: flex-end;
            color: red;
            font-size: large;
            display: flex;
            flex-wrap: nowrap;
            margin-left: 30rpx;
            // height: 80rpx;
            .small {
                align-self: flex-end;
                font-size: 24rpx;
            }
        }
        .card {
            margin-top: 100rpx;
            width: 720rpx;
            height: 712rpx;
            margin: 0 auto;
            background: snow;
            border-radius: 20rpx;
            .item {
                // width: 720rpx;
                height: 712rpx;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                .box {
                    width: 160rpx;
                    height: 300rpx;
                    margin: 0 10rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .img {
                        width: 124rpx;
                        height: 124rpx;
                    }
                    .title {
                        color: #333;
                        font-size: 28rpx;
                        margin: 10rpx 0;
                    }
                    .text {
                        color: #999;
                        font-size: 24rpx;
                    }
                }
            }
        }
    }
    .bottom {
        width: 100%;
        margin-top: 20rpx;
        display: flex;
        // flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-around;
        .box {
            width: 48%;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 40rpx;
            margin: 10rpx 0;
            .img {
                width: 100%;
                border-radius: 40rpx;
            }
            .text {
                margin: 15rpx 0;
                color: #333;
                font-size: 28rpx;
                margin-left: 10rpx;
                align-self: flex-start;
                height: 80rpx;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                display: -webkit-box;
            }
            .userinfo {
                display: flex;
                justify-content: space-between;
                width: 100%;
                // padding: 0 20rpx;
                .user {
                    display: flex;
                    color: #7f7f7f;
                    font-size: 24rpx;
                    height: 48rpx;
                    line-height: 48rpx;
                    .image1 {
                        width: 48rpx;
                        height: 48rpx;
                        border-radius: 50%;
                    }
                }
                .look {
                    display: flex;
                    color: #7f7f7f;
                    font-size: 24rpx;
                    height: 32rpx;
                    align-self: center;
                    line-height: 32rpx;
                    .image2 {
                        width: 32rpx;
                        height: 32rpx;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
}
</style>
<style>
.div {
    margin: 0;
    padding: 40rpx 0;
}
</style>
